<template>
  <div>
    <el-row
      :gutter="20"
      class="header-box"
      v-if="pictureListData.banner.length < 0 && pictureListData.banner_two.length < 0"
    >
      <el-col :lg="18" :xs="24" :sm="24" :md="24" v-if="pictureListData.banner.length">
        <Carousel :list="pictureListData.banner"></Carousel>
      </el-col>
      <el-col :lg="6" :xs="24" :sm="24" :md="24" v-if="pictureListData.banner_two.length">
        <el-row :gutter="20" class="right-box">
          <el-col
            :lg="24"
            :xs="12"
            :sm="12"
            :md="12"
            v-for="(item, index) in pictureListData.banner_two"
            :key="index"
          >
            <NuxtLink
              :to="item.url ? item.url : '/'"
              target="_blank"
              :title="item.content"
              :class="index == 0 ? 'right-item margin-bottom-10' : 'right-item'"
              ><img :src="item.image_to.http_url" :alt="item.content" class="right-img" />
              <span class="right-name">{{ item.content }}</span>
            </NuxtLink>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-card class="list-box" shadow="hover">
      <template #header>
        <div class="list-title">最新推荐</div>
      </template>
      <List1 :list="list" :total="total" :currentPage="page" @change="changeList"></List1>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { articleList } from '@/api/articleList';
import { pictureList } from '@/api/pictureList';
const router = useRouter();

let pictureListData: any = [];
const pictureListRes = await pictureList({ type: 1 });
if (pictureListRes.status === 20000) {
  pictureListData = pictureListRes.data;
}

let list: any = [];
let total: number = 0;
let page: number = 1;
if (router.currentRoute.value.query.page) {
  page = Number(router.currentRoute.value.query.page);
}
const listRes = await articleList({ page: page, open: 1 });
if (listRes.status === 20000) {
  list = listRes.data.list;
  total = listRes.data.total;
}
const changeList = async (val: number) => {
  page = val;
  list = [];
  router.push({
    path: '/',
    query: {
      page: val,
    },
  });
  const listRes = await articleList({ page: page, open: 1 });
  if (listRes.status === 20000) {
    list = listRes.data.list;
    total = listRes.data.total;
  }
};
</script>
<style lang="less" scoped>
@import './index.less';
</style>
